<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
      <style>
          body{background-color: #fff}
        #header {  height:50px;background-color: #fc6d4d;position:fixed;top: 0}
      #back { float: left; padding:17px}
      #back img{ width: 16px; height: 16px}
      nav {
              float: left;
              display: -webkit-box;
              display: -webkit-flex;
              display: flex;
              -webkit-box-orient: horizontal;
              -webkit-flex-flow: row;
              flex-flow: row;
              position: fixed;
              width: 100%;
              height: 40px;
              ;background-color: #fff;z-index:99999
          }

          nav .menu{
              -webkit-box-flex: 1;
              -webkit-flex: 1;
              flex: 1;
              width: 100%;
              height: 40px;
              line-height: 40px;
              font-size: 14px;
              color: #333;
              text-align: center;
              border:1px solid #F5F5F5;overflow: hidden;
              border-right: none
          }
          nav .menu.selected {
              font-size: 14px;
              color: #000;
              font-weight: bolder;
          }
          #search { float: right; padding:17px}
          #search img{ width: 16px; height: 16px}
          #cont_list{ margin-top:100px}
          #cont_list .title{ font-size: 14px; height: 52px; border-bottom: 1px solid #F5F5F5; background: #FFF}
          #cont_list .title  span{ display: block; float: left; width: 3px; height: 12px; background: #666666; line-height: 52px;margin-left: 15px; margin-right: 12px; margin-top: 20px}
          #cont_list .title h3{ float: left; line-height: 52px; color: #333333;}
          #cont_list .title2{ font-size: 14px; height: 52px; border-bottom: 1px solid #F5F5F5; background: #FFF; margin-top: 20px;margin-bottom: -5px}
          #cont_list .title2  span{ display: block; float: left; width: 3px; height: 12px; background: #666666; line-height: 52px;margin-left: 15px; margin-right: 12px; margin-top: 20px}
          #cont_list .title2 h3{ float: left; line-height: 52px; color: #333333;}
          #cont_list .cont_l{ height: 112px; background: #FFF; margin:0; padding-left: 15px;    border-bottom: 5px solid #F5F5F5;}
          #cont_list .cont_l:nth-child(2){margin-top: 0px}
          #cont_list .cont_l h2{ padding-top:15px; margin-bottom:5px;color: #333333; font-size: 13px}
          #cont_list .cont_l h3{ font-size: 12px; color: #999; padding-bottom: 8px;}
          #cont_list .cont_l .cont_l_3 span{ font-size: 12px; color: #999999; padding: 5px 12px; background: #F8F8FA; margin-right: 10px}
          #cont_list .cont_l .time{ float: right; color: #CCCCCC; font-size: 12px; margin-top: -82px; margin-right: 10px}
          #cont_list .cont_l2{ height: 118px; background: #FFF; margin-top: 5px; padding-left: 15px;}
          #cont_list .cont_l2:nth-child(3){margin-top:-50px}
          #cont_list .cont_l2 h2{ padding-top: 21px; margin-bottom: 14px;color: #333333; font-size: 13px}
          #cont_list .cont_l2 h3{ font-size: 12px; color: #999; padding-bottom: 15px;}
          #cont_list .cont_l2 .cont_l_3 span{ font-size: 12px; color: #999999; padding: 5px 12px; background: #F8F8FA; margin-right: 10px}
          #cont_list .cont_l2 .time{ float: right; color: #CCCCCC; font-size: 12px; margin-top: -82px; margin-right: 10px}
      </style>
  </head>
  <body>
      <header class="aui-bar aui-bar-nav" id="header">
        <a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left" style="font-size:14px;"></span>
        </a>
        <div class="aui-title" style="font-size:14px;">项目需求</div>

    </header>
    <nav id="nav">
        <div class="menu" tapmode onclick="dq()" id="xzdq">地区</div>
        <div class="menu" tapmode onclick="sb()" id="xzsb">驾驶设备</div>
        <div class="menu" tapmode onclick="jy()" id="xzjy">经验要求</div>
        <div class="menu" tapmode onclick="jl()" id="xzjl">距离</div>
    </nav>
    <div id="cont_list">

        <div class="cont_l" v-for="site in xmxq"  @click="show_xmxq(site.id)">
              <h2>{{site.title}}</h2>
              <h3>{{site.dizhi}}&nbsp;&nbsp;|&nbsp;<span>{{site.miaoshu}}</span></h3>
              <div class="cont_l_3"><span>{{site.gongqi}}天工期</span><span>{{site.renshu?site.renshu:0}}人已参与</span><span>距离{{site.juli}}KM</span></div>
              <div class="time">{{site.time}}</div>
        </div>
    </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
      <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript">
      apiready = function(){

        keyback()
          var header = $api.byId('header');

  headerH =  $api.fixStatusBar(header);
headerH = $api.fixIos7Bar(header);

$api.css($api.byId('nav'), 'top:'+headerH+'px');
$api.css($api.byId('cont_list'), 'margin-top:'+(headerH+45)+'px');

api.showProgress({
    style: 'default',
    animationType: 'fade',
    title: '努力加载中...',
    text: '先喝杯茶...',
    modal: false
});


var demo = api.require('myTimer');
demo.startTimer({
    step:5,
    isLoop:true
},function(ret) {
    ajax();
});
        ajax();

        api.setRefreshHeaderInfo({
            loadingImg: 'widget://image/refresh.png',
            bgColor: '#fff',
            textColor: '#333',
            textDown: '下拉刷新...',
            textUp: '松开刷新...'
        }, function(ret, err) {
          ajax();

        });
        //上拉更多
        api.addEventListener({
              name:'scrolltobottom',
              extra:{
                  threshold:50            //设置距离底部多少距离时触发，默认值为0，数字类型
              }
          },function(ret,err){
            limt+=10;
              ajax();
              api.showProgress({
                  style: 'default',
                  animationType: 'fade',
                  title: '努力加载中...',
                  text: '先喝杯茶...',
                  modal: false
              });


          });

        //
    //  saixuan();
           xmxqlist = new Vue({
                     el: '#cont_list',
                        data: $tools.getdata(),

                 });

$tools.datarefresh(xmxqlist);

      };
      function closeWin(){
        api.setFrameGroupIndex({
      name: 'group1',
      index:0
      });
api.sendEvent({
    name: 'hsy',
    extra: {
      id:0
    }
});

}

var headerH,xmxqlist,shebei,header;
diqu="";
juli="";
var limt = 10

function dq(){
  api.actionSheet({
      buttons:  ['全济南',"历下区", "市中区", "天桥区", "历城区", "槐荫区", "长清区", "章丘区", "济阳区", "莱芜区", "钢城区", "高新区"]
  }, function(ret, err){
      if( ret ){
                if(ret.buttonIndex==1){
                    diqu = "";
                    $api.text($api.byId('xzdq'), '全济南');
                  }else if(ret.buttonIndex==2){
                    diqu ="历下区";
                    $api.text($api.byId('xzdq'), '历下区');
                  }else if(ret.buttonIndex==3){
                    diqu ="市中区";
                    $api.text($api.byId('xzdq'), '市中区');
                  }else if(ret.buttonIndex==4){
                    diqu ="天桥区";
                    $api.text($api.byId('xzdq'), '天桥区');
                  }else if(ret.buttonIndex==5){
                    diqu ="历城区";
                    $api.text($api.byId('xzdq'), '历城区');
                  }else if(ret.buttonIndex==6){
                    diqu ="槐荫区";
                    $api.text($api.byId('xzdq'), '槐荫区');
                  }else if(ret.buttonIndex==7){
                    diqu ="长清区";
                    $api.text($api.byId('xzdq'), '长清区');
                  }else if(ret.buttonIndex==8){
                    diqu ="章丘区";
                    $api.text($api.byId('xzdq'), '章丘区');
                  }else if(ret.buttonIndex==9){
                    diqu ="济阳区";
                    $api.text($api.byId('xzdq'), '济阳区');
                  }else if(ret.buttonIndex==10){
                    diqu ="莱芜区";
                    $api.text($api.byId('xzdq'), '莱芜区');
                  }else if(ret.buttonIndex==11){
                    diqu ="钢城区";
                    $api.text($api.byId('xzdq'), '钢城区');
                  }else if(ret.buttonIndex==12){
                    diqu ="高新区";
                    $api.text($api.byId('xzdq'), '高新区');
                  }
                   ajax();
      }else{
      }
  });
}


function sb(){
  api.actionSheet({
      buttons:  ['不限',"小挖(10吨以下)", "中挖(10~20吨)", "中大挖(20~30吨)", "大挖(30吨以上)"]
  }, function(ret, err){
      if( ret ){
        if(ret.buttonIndex==1){
                  shebei=0
                  $api.text($api.byId('xzsb'), '不限');
                }else if(ret.buttonIndex==2){
                  shebei = "小挖(10吨以下)";
                  $api.text($api.byId('xzsb'), '小挖(10吨以下)');
                }else if(ret.buttonIndex==3){
                  shebei = "中挖(10~20吨)";
                  $api.text($api.byId('xzsb'), '中挖(10~20吨)');
                }else if(ret.buttonIndex==4){
                  shebei = "中大挖(20~30吨)";
                  $api.text($api.byId('xzsb'), '中大挖(20~30吨)');
                }else if(ret.buttonIndex==5){
                  shebei = "大挖(30吨以上)";
                  $api.text($api.byId('xzsb'), '大挖(30吨以上)');
                }
                 ajax();
      }else{
          // console.log( JSON.stringify( err ) );
      }
  });

}


function jy(){
  api.actionSheet({
      buttons: ['不限',"1年以上", "3年以上","5年以上"]
  }, function(ret, err){
      if( ret ){
        if(ret.buttonIndex==1){
                  jingyan=0
                  $api.text($api.byId('xzjy'), '不限');
                }else if(ret.buttonIndex==2){
                  jingyan =1;
                  $api.text($api.byId('xzjy'), '1年以上');
                }else if(ret.buttonIndex==3){
                  jingyan = 3;
                  $api.text($api.byId('xzjy'), '3年以上');
                }else if(ret.buttonIndex==4){
                  jingyan =5;
                  $api.text($api.byId('xzjy'), '5年以上');
                }
                 ajax();
      }else{
        //   console.log( JSON.stringify( err ) );
      }
  });

}

function jl(){
  api.actionSheet({
      buttons: ['不限',"由远至近", "由近至远"]
  }, function(ret, err){
      if( ret ){
        if(ret.buttonIndex==1){
                  juli=""
                  $api.text($api.byId('xzjl'), '不限');
                }else if(ret.buttonIndex==2){
                  juli ="由远至近";
                    $api.text($api.byId('xzjl'), '由远至近');
                }else if(ret.buttonIndex==3){
                  juli = "由近至远";
                    $api.text($api.byId('xzjl'), '由近至远');
                }
                 ajax();
      }else{
          // console.log( JSON.stringify( err ) );
      }
  });

}


function saixuan(){
  var demo = api.require('dropDownMenu');
  demo.openMenu({
    rect : {
        x : 0,
        y : headerH,
        w : api.frameWidth
     },
        data : [
           {
               title : '济南',
               item : ['默认',"历下区", "市中区", "天桥区", "历城区", "槐荫区", "长清区", "章丘区", "济阳区", "莱芜区", "钢城区", "高新区"]
           },{
               title : '驾驶设备',
               item : ['默认',"小挖(10吨以下)", "中挖(10~20吨)", "中大挖(20~30吨)", "大挖(30吨以上)"]
           },{
               title : '距离',
               item : ['默认',"由远至近", "由近至远"]
           }
       ],
    fixedOn : api.frameName,
    fixed : false
  },function(ret, err) {
    //console.log(JSON.stringify(ret));
    if(ret.title=="济南"){
        if(ret.value=="默认"){
          diqu = "";
        }else{
          diqu =  ret.value;
        }
    }
    if(ret.title=="驾驶设备"){
      if(ret.value=="默认"){
        shebei=""
      }else{
        shebei =  ret.value;
      }
    }
    if(ret.title=="距离"){
      if(ret.value=="默认"){
        juli=""
      }else{
        juli =  ret.value;
      }
    }
          ajax()
  });
}


function opsearch() {
  api.openWin({
      name: 'search',
      url: 'widget://html/search/search.html',
      slidBackEnabled:true,
      pageParam: {
          name: 'test'
      }
  });

}




function show_xmxq(id){

api.openWin({
    name: 'show_xmxq',
    url: 'widget://html/xmxq/show_xmxq_win.html',
    pageParam: {
       id: id
    },animation:{
          type:"push",                //动画类型（详见动画类型常量）
            subType:"from_right",       //动画子类型（详见动画子类型常量）
            duration:500                //动画过渡时间，默认300毫秒

        },
        bounces: false,
           bgColor: 'rgba(0,0,0,0)',
           vScrollBarEnabled: true,
           hScrollBarEnabled: true
});


}


function ajax(){
      api.ajax({
          url: $api.getStorage("backapi")+'/index.php?s=xiangmu&c=home&m=list_ajax&uid='+$api.getStorage("member"),
          method: 'post',
          data: {
              values: {
                  limt: limt,
                  shebei:shebei,
                  juli:juli
              },
          }
      },function(ret, err){
          if (ret) {
            if(diqu==""){
              xmxqlist.xmxq=ret.status
                $tools.setData("xmxq",ret.status);

            }else{

              diquasc(ret)
              //  console.log(2222222);

            }
              api.refreshHeaderLoadDone()
              api.hideProgress();

          //    console.log(diqu);
        //      console.log(shebei);

          } else {
            api.toast({
                msg: '获取数据失败',
                duration: 2000,
                location: 'bottom'
            });
            api.refreshHeaderLoadDone()
            api.hideProgress();
              console.log( JSON.stringify( err ) );
          }
      });


}




function diquasc(data){
  var arr = [];
//  console.log(2);
    for (var i = 0; i < data.status.length; i++) {
          //console.log(JSON.stringify(data.status[i].dizhi));
          var ddd = data.status[i].dizhi
          if(ddd.indexOf(diqu) != -1){
              arr.push(data.status[i])
          }
    }
    $tools.setData("xmxq",arr);
      xmxqlist.xmxq=arr
}





function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
function keyback() {
    api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            api.confirm({
                title: '提示',
                msg: '是否退出应用',
                buttons: ['确定', '取消']
            }, function(ret, err) {
                if (ret.buttonIndex == 1) {
                    api.closeWidget({
                        silent: true
                    });
                }
            });
        })
    }

  </script>
  </html>
